<template>
  <div class="container-xl my-home-div" :style="{ '--bs-gutter-x': 0, '--my-home-div-height': '56px' }">
    <div class="row position-relative my-home-div-line">
      <div class="col">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-a-icon_team_teamdata"></use>
        </svg>
        团队数据 <span class="text-small">
          注：数据统计为编程题数据，不包含非编程题。非编程题记录可在“成员测评记录”查看
        </span>
      </div>
      <div class="row text-right">
        <div class="dataright">
          <el-date-picker :shortcuts="shortcuts" v-model="formdate" type="daterange" range-separator="-" size="small" />
        </div>
      </div>
    </div>
    <div :style="{ padding: '12px' }">
      <ul class="nav nav-tabs">
        <li class="nav-item">
          <router-link class="nav-link dataspan" :to="{ name: '成员排行榜', params: { ID: data?.ID }, }">
            <span>成员排行榜</span>
          </router-link>
        </li>
        <li class="nav-item">
          <router-link class="nav-link dataspan" :to="{ name: '题目排行榜', params: { ID: data?.ID }, }">
            <span>题目排行榜</span>
          </router-link>
        </li>
        <li class="nav-item">
          <router-link class="nav-link dataspan" :to="{ name: '成员数据统计', params: { ID: data?.ID }, }">
            <span>成员数据统计</span>
          </router-link>
        </li>
        <li class="nav-item">
          <router-link class="dataspan nav-link" :to="{ name: '成员测评记录', params: { ID: data?.ID }, }">
            <span>成员测评记录</span>
          </router-link>
        </li>
        <li class="nav-item" v-if="isAdmin">
          <router-link class="dataspan nav-link" v-if="isAdmin" :to="{ name: '成员比赛记录', params: { ID: data?.ID }, }">
            <span>成员比赛记录</span>
          </router-link>
        </li>
      </ul>
      <div class="border-top-0 border" :style="{ padding: '12px' }">
        <router-view v-bind="{ ...prop }" :formdata="formdata" :teamusers="teamuser"></router-view>
      </div>
    </div>
  </div>
</template>


<script setup lang="ts">
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import { computed, onMounted, ref } from "vue";
import { useRoute, onBeforeRouteUpdate, useRouter, onBeforeRouteLeave } from "vue-router";
import { uniq } from "underscore";
import { shortcuts } from "../../../util/time";
import { dayjs } from "element-plus";

const route = useRoute();
const router = useRouter()
// 成员排行榜
onBeforeRouteUpdate((to, f, next) => {
  if (to.redirectedFrom?.name === '团队数据' && f.name === '成员比赛记录' && f.query.activityid) {
    next(false)
  } else {
    next()
  }
})

const prop = defineProps<{ data?: Studycodemodel.Iteam, teamusers: Studycodemodel.Iteamuser[], isAdmin: 0 | 1 | 2 | 3 }>()

const teamuser = computed(() => {
  if (!prop.data?.isadminshowquestion) {
    return prop.teamusers.filter(e => e.isAdmin === 0)
  }
  return uniq(prop.teamusers.concat({ userid: prop.data?.userid, user: prop.data?.user }), e => e.userid)
})

const formdate = ref([new Date(Date.now() - 1000 * 60 * 60 * 24 * 365), new Date])
const formdata = computed(() => {
  return {
    teamid: prop.data?.ID,
    formdate: dayjs(formdate.value[0]).format('YYYY-MM-DD 00:00:00'),
    todate: dayjs(formdate.value[1]).format('YYYY-MM-DD 23:59:59'),
    userid: route.query.userid
  }
})

</script>

<style scoped>
.dataspan {
  color: var(--color-43);
  text-align: center;
  text-decoration: none;
  background-color: var(--color-f5);
}

.router-link-active {
  background-color: var(--color-f5);
  font-weight: bold;
}

.dataright {
  width: 380px;
  position: absolute;
  right: 12px;
  top: 0;
  display: inline-block;
}

.router-link-exact-active {
  color: #495057;
  background-color: #fff !important;
  border-color: #dee2e6 #dee2e6 #fff;
}

.nav-item {
  margin-right: 12px;
}

.text-small {
  color: rgba(0, 0, 0, .5);
  font-size: 12px;
  padding-left: 20px;
  font-weight: 400;
}
</style>